<template>
  <el-card class="detail-card">
    <Title title="合同信息" style="padding: 0 0 24px 0" />
    <el-table
      v-if="contractInfo"
      :data="handelData(contractInfo)"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column align="left" label="合同编号" min-width="100">
        <template slot-scope="scope">
          <el-tooltip placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.number }}</div>
            <div class="line-clamp2">{{ scope.row.number }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="left" label="合同有效期" width="200">
        <template slot-scope="scope">
          {{ scope.row.validityStartTime/1000 | standardFormatNoHour('YYYY/MM/DD', '--') }} - {{ scope.row.validityEndTime/1000 | standardFormatNoHour('YYYY/MM/DD', '--') }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="往来单位" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.customer || '--' }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="合同名称/项目" min-width="120">
        <template slot-scope="scope">
          <el-tooltip v-if=" scope.row.name && scope.row.name!==''" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.name }}</div>
            <div class="line-clamp2">{{ scope.row.name }}</div>
          </el-tooltip>
          <div v-else>--</div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import Title from '@/components/Title';
import { standardFormatNoHour } from '@/filters/date';
import { moneyFilter } from '@/filters/number';
export default {
  components: { Title },
  filters: { standardFormatNoHour, moneyFilter },
  props: {
    contractInfo: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    handelData(data) {
      const res = [];
      if (this.isArray(data)) {
        return data;
      } else {
        res.push(data);
        return res;
      }
    },
    isArray(data) {
      return Array.isArray(data);
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-card {
  padding: 24px 24px 0 24px;
}
</style>
